<template>
  <div class="bg courseReserve-container">

    <!-- 搜索区域 -->
    <div style="margin-bottom: 10px;">
      <el-input style="width: 200px" placeholder="查询课程" prefix-icon="el-icon-c-scale-to-original"
                v-model="searchName" clearable></el-input>
    </div>

    <!-- 课程卡片展示区域 -->
    <div style="display: flex; flex-wrap: wrap; height: 85vh; overflow: auto">
      <el-card
          v-for="(item) in filteredCourse"
          :key="item.id"
          style="width: calc(33.33% - 10px); margin-right: 10px; margin-bottom: 10px; height: 180px">
        <div style="display: flex; flex-direction: column; justify-content: space-between;">
          <h3>{{ item.name }}</h3>
          <div style="display: flex; flex-wrap: nowrap; justify-content: space-between;">
            <p>{{ item.time }}</p>
            <p>{{ item.place }}</p>
          </div>
          <div style="display: flex; justify-content: space-between;">
            <p :class="{'green-text': item.state === '可预约',
            'yellow-text': item.state === '待安排',
            'red-text': item.state === '不可用'}">{{ item.state }}</p>
            <el-button type="text" @click="showDetail(item)">查看详情</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 课程详情表单 -->
    <el-dialog title="课程详情" :visible.sync="dialogVisible">
      <el-form :model="selectedCourse">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="课程名称：">
              <div class="course-info">{{ selectedCourse.name }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程类型：">
              <div class="course-info">{{ selectedCourse.type }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="课程介绍：">
              <div class="course-info">{{ selectedCourse.description }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="课程时长（天）：">
              <div class="course-info">{{ selectedCourse.days }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="上课时间：">
              <div class="course-info">{{ selectedCourse.time }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上课地点：">
              <div class="course-info">{{ selectedCourse.place }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="课程状态：">
              <div class="course-info">{{ selectedCourse.state }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预约时间：">
              <el-date-picker
                  v-model="selectedCourse.reservationTime" type="date" placeholder="选择开始时间"
                  style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="display: flex; justify-content: center; align-items: flex-end;">
        <el-button type="primary" style="transform: scale(1.2);" v-if="selectedCourse.state === '可预约'"
                   @click="handleReservation">预约</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script>
export default {
  name: "Course_reserve",

  // 组件的数据对象
  data() {
    return {
      course: [], // 存储所有课程数据
      searchName: "", // 用户输入的搜索课程名称
      selectedCourse: {reservationTime: null}, // 当前选中的课程详情
      dialogVisible: false, // 控制课程详情对话框的显示与隐藏
    };
  },

  // 计算属性，用于根据搜索名称过滤课程
  computed: {
    filteredCourse() {
      // 首先根据搜索名称过滤课程
      let searchedCourses = this.course.filter(item =>
          item.name.includes(this.searchName)
      );

      // 然后将 '可预约' 的课程放在前面，其他课程放在后面
      let reservableCourses = searchedCourses.filter(item => item.state === '可预约');
      let otherCourses = searchedCourses.filter(item => item.state !== '可预约');

      // 合并数组，确保 '可预约' 的课程优先显示
      return [...reservableCourses, ...otherCourses];
    }
  },

  // 组件创建时调用 loadCourse 方法加载课程数据
  created() {
    this.loadCourse();
  },

  methods: {

    // 加载课程数据的方法
    loadCourse() {
      this.$request.get("/course/selectAll").then(res => {
        this.course = res.data; // 将获取到的课程数据赋值给 course 数组
      });
    },

    // 显示课程详情的方法
    showDetail(item) {
      // 将选中的课程数据复制到 selectedCourse 对象中
      this.selectedCourse = {...item};
      this.dialogVisible = true; // 显示课程详情对话框
    },

    // 处理预约的方法
    handleReservation() {
      // 检查是否选择了课程
      if (!this.selectedCourse.id) {
        this.$message.error('请选择要预约的课程');
        return;
      }
      // 检查是否选择了预约时间
      if (!this.selectedCourse.reservationTime) {
        this.$message.error('请选择预约时间');
        return;
      }
      // 发送预约请求到服务器
      this.$request.post('/reserve/create', {
        content: this.selectedCourse.name,
        description: this.selectedCourse.type,
        type: '课程',
        state: '待审核',
        reserveTime: this.selectedCourse.reservationTime, // 添加预约时间到请求数据中
      }).then(res => {
        if (res.code === '200') {
          this.$message.success('预约成功');
          this.dialogVisible = false; // 预约成功后关闭对话框
        } else {
          this.$message.error('预约失败: ' + res.msg); // 显示预约失败的错误信息
        }
      }).catch(error => {
        this.$message.error('预约发生错误: ' + error); // 显示预约过程中发生的错误
      });
    },
  }
};
</script>


<style scoped>
.course-info {
  font-size: 16px;
  color: #333;
}

.green-text {
  color: green;
  font-weight: bold;
}
.yellow-text {
  color: orange;
  font-weight: bold;
}
.red-text {
  color: red;
  font-weight: bold;
}
.courseReserve-container {
  background:
      linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), /* 白色半透明遮罩让颜色变淡 */
      url('~@/assets/bg/courseReserve.png') center/cover no-repeat;
}
</style>
